<template>
	<view class="con-header">
		<view v-if="!headerText" @click="onPath" class="onPath">返回详情</view>
		<text>{{ headerText }}</text>
		<view style="position: absolute;right: 20px;">
			<text style="font-size: 11.4px;">{{ userName }}</text>
			<text class="logout" @click="logout">退出登录</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		headerText: String
	},
	data() {
		return { 
			userName: uni.getStorageSync('userName')
		};
	},
	methods: {
		// 退出
		logout() {
			uni.showModal({
				title: '',
				content: '确定退出吗？',
				success: function(res) {
					if (res.confirm) {
						uni.reLaunch({
							url:'../pages/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 返回
		onPath() {
			window.open("about:blank","_self").close()  
		},
	}
};
</script>

<style lang="less" scoped>
.con-header {
	display: flex;
	justify-content: space-between;
	padding: 0 23.75px 0 45.91px;
	height: 63px;
	line-height: 63px;
	width: 100%;
	background: rgba(49, 131, 224, 1);
	color: #ffffff;
	font-size: 14px;
	box-sizing: border-box;
	.logout {
		display: inline-block;
		width: 99.75px;
		height: 30.08px;
		background: rgba(28, 112, 207, 1);
		border-radius: 15.83px;
		vertical-align: middle;
		line-height: 30.08px;
		text-align: center;
		font-size: 11.08px;
		font-weight: 600;
		margin-left: 47.5px;
		padding-left: 17.54px;
		box-sizing: border-box;
		&::before {
			content: '';
			position: absolute;
			background: url(@/static/image/caozuo_zhuxiao_tuichudenglu@2x.png);
			width: 12.66px;
			height: 13.45px;
			background-size: 100% 100%;
			margin: 9.5px 0 0 -19px;
		}
	}
}
.onPath {
		width: 130px;
		height: 63px;
		line-height: 63px;
		background: url('../static/image/Fill_1.png') no-repeat;
		background-position-x: 1px;
		background-position-y: 20px;
		position: absolute;
		top: 0px;
		left: 40px;
		color: #ffffff;
		padding-left: 20px;
		border: 0;
		float: left;
		cursor: pointer;
	}
	uni-button:after {
		content: none;
	}
	uni-button {
		font-size: 14px;
	}
</style>
